<template>
    <section style="padding: 24px; background:#fff;">
        <div class="email-box">
            <a-form :form="form">
                <a-form-item label="邮箱" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                    <a-input v-decorator="['email', { rules: [{type: 'email',message: '请输入正确的邮箱账号!'},{ required: true, message: '请输入邮箱!' }] }]" />
                </a-form-item>
                <a-form-item label="验证码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                    <a-row :gutter="16">
                        <a-col :span="17">
                            <a-input v-decorator="['verifyCode', { rules: [{ required: checkNull, message: '请输入验证码!' }] }]" />
                        </a-col>
                        <a-col :span="6">
                            <a-button v-if="!isCountDowning" type="primary" @click="getVerifyCode">获取验证码</a-button>
                            <a-button v-else type="primary" @click="getVerifyCode" disabled>
                                {{ countDownText }}
                            </a-button>
                        </a-col>
                    </a-row>

                </a-form-item>
                <a-form-item>
                    <div class="update-email-btn">
                        <a-button type="primary" @click="updateEmailAddress">更新邮箱</a-button>
                    </div>
                </a-form-item>
            </a-form>
        </div>
    </section>
</template>
<script>
const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 15 },
};
import { getEmailVerify,updateEmailAddress } from '@/api/api'
export default {
    data() {
        return {
            email: '',
            verifyCode: '',
            isCountDowning: false,
            countDownText: '重新发送(60)',
            form: this.$form.createForm(this),
            formItemLayout,
            checkNull: false,
        }
    },
    methods: {
        updateEmailAddress() {
            this.checkNull = true;
            this.$nextTick(() => {
                this.form.validateFields(['verifyCode'], { force: true });
            });
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.email = this.form.getFieldValue("email");
                    this.verifyCode = this.form.getFieldValue("verifyCode");
                    updateEmailAddress(this.email,this.verifyCode).then(res => {
                        if (res.code) {
                            this.$message.success(res.data);
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        },
        getVerifyCode() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.email = this.form.getFieldValue("email");
                    getEmailVerify(this.email).then(res => {
                        if (res.code === 200) {
                            this.startCountDown();
                            this.$message.success(res.data);
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        },
        startCountDown() {
            let time = 60;
            this.isCountDowning = true;
            let that = this;
            let interval = setInterval(function () {
                //执行倒计时内容
                time--;
                if (time <= 0) {
                    that.isCountDowning = false;
                    clearInterval(interval);
                }
                that.countDownText = '重新发送(' + time + ')';
            }, 1000);
        },
    },
}
</script>
<style scoped>
.email-box {
    width: 600px;
}
.update-email-btn {
    margin-left: 100px;
}
</style>